<template>
  <view class="wrap">
    <view>
      <up-search placeholder="请输入产品名称" :disabled="true" :showAction="false" height="68" margin="24rpx 30rpx" searchIconSize="34" placeholderColor="#909399; font-size: 24rpx;" @click="goSearch"></up-search>
    </view>
    <view class="shopDetail">
      <scroll-view scroll-y class="shopTypeList">
        <view v-for="item in typeList" :key="item.value" :class="`typeItem ${item.value === typeId  ? 'typeItemSelect' : ''}`" @click="selectType(item)">
          <up-text :size="28" :text="item.label"></up-text>
        </view>
      </scroll-view>
      <view class="shopList">
        <common-scroll-view :loading="loading" :pageNum="page" :pageSize="limit" :total="total" :data="shopList"
          @onRefresh="onRefreshBack" @getMore="getMore" :noCreate="true">
          <view v-for="item in shopList" :key="item.id" style="padding-left: 30rpx; padding-right: 30rpx;">
            <common-product-item :item="item" :isLogin="isLogin" @showLoginModal="showLoginModal=true"></common-product-item>
          </view>
        </common-scroll-view>
      </view>
    </view>
    <common-shopCard-modal :isLogin="isLogin"></common-shopCard-modal>
    <common-to-login-modal :show="showLoginModal" @cancel="showLoginModal=false"></common-to-login-modal>
  </view>
  <custom-tab-bar />
</template>

<script>
import { setTabBarSelected, tabBarList, setTabBarList } from '@/utils/common'
import { queryGoodsTypeList, queryGoods } from '@/services/shop'

export default {
  data() {
    return {
      typeList: [{label: '全部产品', value: ''}],
      loading: true,
      typeId: '',
      shopList: [],
      limit: 10,
      page: 1,
      total: 10,
      showLoginModal: false,
    }
  },
  computed: {
    isLogin() {
      const isLogin = this.$store.state.isLogin;
      setTabBarList(isLogin);
      setTabBarSelected(1);
      return isLogin;
    }
  },
  watch: {
    typeId(val, preVal) {
      const _that = this;
      if (val === preVal) return;
      _that.page = 1;
      _that.getShopList(1);
    }
  },
  async onShow() {
    this.getTypeList();
    this.getShopList(1);
    setTabBarSelected(1);
  },
  methods: {
    async getTypeList() {
      const _that = this;
      this.loading = true;
      const res = await queryGoodsTypeList({})
      if (res.success) {
        const list = res.data.map(({type, typeId}) => ({
          label: type, value: typeId
        }));
        list.unshift({label: '全部产品', value: ''});
        _that.typeList = list;
      }
    },
    selectType(item) {
      this.typeId = item.value;
    },
    async getShopList(pageNum) {
      const _that = this;
      this.loading = true;
      const { typeId, limit } = this;
      const params = {
        limit,
        page: pageNum
      };
      if (typeId) {
        params.typeId = typeId;
      }
      const res = await queryGoods(params)
      console.log('queryGoods', res)
      if (res.success) {
        const { total = 0, records = [] } = res?.data || {};
        _that.page = pageNum;
        _that.total = total;
        let list = [...records];
        if (pageNum === 1) {
          _that.shopList = list;
        } else {
          _that.shopList = _that.shopList.concat(list);
        }
      }
      _that.loading = false;
    },
    async onRefreshBack(callback) {
      await this.getShopList(1);
      callback();
    },
    getMore() {
      this.getShopList(this.page + 1);
    },
    goSearch() {
      uni.navigateTo({
        url: '/pages/search/home'
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.wrap{
  display: flex;
  flex-direction: column;
  height: calc(100vh - (100rpx + env(safe-area-inset-bottom) / 2));
  padding-bottom: calc(100rpx + env(safe-area-inset-bottom) / 2);
}
.shopDetail{
  flex: 1;
  display: flex;
  height: 100%;
}
.shopTypeList{
  width: 220rpx;
  height: 100%;
  background-color: #f2f2f2;
  flex-shrink: 0;
}
.typeItem {
  min-height: 88rpx;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24rpx 48rpx;
}
.typeItemSelect {
  background-color: #fff;
}
.typeItemSelect::before {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  content: ' ';
  background-color: #79C435;
  width: 8rpx;
}
.shopList {
  height: 100%;
  width: 100%;
}
</style>
